
<template>
  <div id="urlSelect">
    <el-dialog width="1000px" :visible.sync="isShown" title="链接选择器">
      <el-tabs style="height: 500" v-model="activeName">
        <el-tab-pane
          v-if="cateShown[0]"
          v-loading="marketLoad"
          label="平台首页"
          name="platform"
         >
          <div class="content nui-scroll">
            <div style="margin: 15px 0; width: 300px">
<!--              <el-input placeholder="请输入内容" v-model="marketKeyWords">-->
<!--                <template slot="append">搜索</template>-->
<!--              </el-input>-->
            </div>
            <ul class="url-list">
              <li @click="gainUrl(v, '平台首页')"
                :class="[licur == v.name + v.id ? 'liCur' : '']"
                v-for="(v, i) in marketPage" :key="i"
              >
                {{ v.name }}
              </li>
            </ul>
          </div>
        </el-tab-pane>
        <el-tab-pane
          v-if="cateShown[1]"
          v-loading="categoryLoad"
          label="商品分类"
          name="productCategory"
        >
          <div class="product-type content nui-scroll">
            <ul class="product-type-title">
              <li>分类名称</li>
              <li>分类图片</li>
              <li>操作</li>
            </ul>
            <div>
              <ul class="product-type-list">
                <li v-for="(v, i) in productCategory" :key="i">
                  <div class="list">
                    <div>
                      <span>一级</span>
                      <span>{{ v.name }}</span>
                    </div>
                    <div>
                      <el-image
                        style="width: 50px; height: 50px"
                        :src="v.icon"
                        fit="cover"
                      ></el-image>
                    </div>
                    <div>
                      <el-button
                        @click="gainUrl(v, '商品分类')"
                        :type="licur == v.name + v.id ? 'primary' : ''"
                        size="small"
                        >选择</el-button
                      >
                    </div>
                  </div>
                  <ul v-for="(a, b) in v.children">
                    <li>
                      <div class="list" style="background: #fafdff">
                        <div>
                          <span style="margin-left: 80px">二级</span>
                          <span>{{ a.name }}</span>
                        </div>
                        <div>
                          <el-image
                            style="width: 50px; height: 50px"
                            :src="a.icon"
                            fit="cover"
                          ></el-image>
                        </div>
                        <div>
                          <el-button
                            @click="gainUrl(a, '商品分类')"
                            :type="licur == a.name + a.id ? 'primary' : ''"
                            size="small"
                            >选择</el-button
                          >
                        </div>
                      </div>
                    </li>
                  </ul>
                </li>
              </ul>
              <div style="text-align: center; margin-top: 20px">
                <el-pagination
                  @current-change="fy1"
                  :current-page="currentPage1"
                  background
                  layout="prev, pager, next"
                  :total="total1"
                ></el-pagination>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane
          v-if="cateShown[2]"
          v-loading="productLoad"
          label="商品"
          name="product"
         >
          <div class="content nui-scroll">
            <!-- <div style="margin: 15px 0; width:300px">
              <el-input placeholder="请输入内容" v-model="input2">
                <template slot="append">搜索</template>
              </el-input>
            </div>-->
            <el-table :data="productList" style="width: 100%">
              <el-table-column prop="date" label="商品" min-width="300">
                <template slot-scope="scope">
                  <div class="product-intro">
                    <el-image
                      style="width: 50px; height: 50px; borderradius: 10px"
                      :src="scope.row.icon"
                      fit="cover"
                    ></el-image>
                    <!-- <span>虚</span> -->
                    <span></span>
                    <p>{{ scope.row.name }}</p>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="price" label="价格" min-width="80">
                <template slot-scope="scope">
                  <span>￥{{ scope.row.price }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="stock"
                label="库存"
                min-width="80"
              ></el-table-column>
              <el-table-column prop="address" label="操作" min-width="80">
                <template slot-scope="scope">
                  <el-button
                    @click="gainUrl(scope.row, '商品')"
                    :type="
                      licur == scope.row.name + scope.row.id ? 'primary' : ''
                    "
                    size="small"
                    >选择</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <div style="text-align: center; margin-top: 20px">
              <el-pagination
                @current-change="fy2"
                :current-page="currentPage2"
                background
                layout="prev, pager, next"
                :total="total2"
              ></el-pagination>
            </div>
          </div>
        </el-tab-pane>
<!--        <el-tab-pane label="小程序跳转" name="appjump" v-loading="appjumpLoad">-->
<!--          <div class="xcxxz">-->
<!--            <div class="mar_b20">-->
<!--              <el-input placeholder="请输入小程序名称" v-model="appName">-->
<!--                <span slot="prepend">小程序名称</span>-->
<!--              </el-input>-->
<!--            </div>-->
<!--            <div class="">-->
<!--              <el-input placeholder="请输入APPID" v-model="appId">-->
<!--                <span slot="prepend">APPID</span>-->
<!--              </el-input>-->
<!--            </div>-->
<!--            <div class="tips">请填写跳转小程序的APPID</div>-->
<!--            <div class="">-->
<!--              <el-input placeholder="请输入小程序页面路径" v-model="path">-->
<!--                <span slot="prepend">页面路径</span>-->
<!--              </el-input>-->
<!--            </div>-->
<!--            <div class="tips">请填写跳转小程序的页面路径</div>-->
<!--          </div>-->
<!--        </el-tab-pane>-->
        <el-tab-pane v-if="cateShown[3]" label="自定义页面" name="customPage">
          <!--          <div class="content nui-scroll">-->
          <!--            <div style="margin: 15px 0; width: 300px">-->
          <!--              <el-input placeholder="请输入内容" v-model="input2">-->
          <!--                <template slot="append">搜索</template>-->
          <!--              </el-input>-->
          <!--            </div>-->
          <!--            <el-table :data="[]" style="width: 100%">-->
          <!--              <el-table-column-->
          <!--                prop="date"-->
          <!--                label="页面名称"-->
          <!--                min-width="100"-->
          <!--              ></el-table-column>-->
          <!--              <el-table-column-->
          <!--                prop="name"-->
          <!--                label="页面类型"-->
          <!--                min-width="100"-->
          <!--              ></el-table-column>-->
          <!--              <el-table-column-->
          <!--                prop="address"-->
          <!--                label="修改"-->
          <!--                min-width="100"-->
          <!--              ></el-table-column>-->
          <!--              <el-table-column-->
          <!--                prop="address"-->
          <!--                label="操作"-->
          <!--                min-width="50"-->
          <!--              ></el-table-column>-->
          <!--            </el-table>-->
          <!--          </div>-->
          <div class="content nui-scroll">
            <el-table :data="customPageList" style="width: 100%">
              <el-table-column prop="date" label="页面名称" min-width="300">
                <template slot-scope="scope">
                  <div class="product-intro">
                    <span></span>
                    <p>{{ scope.row.name }}</p>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="address" label="操作" min-width="80">
                <template slot-scope="scope">
                  <el-button
                    @click="gainUrl(scope.row, '自定义页面')"
                    :type="
                      licur == scope.row.name + scope.row.id ? 'primary' : ''
                    "
                    size="small"
                  >选择</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane v-if="cateShown[4]" label="自定义链接" name="link">
          <div class="add-url content nui-scroll">
            <div>
              <el-radio v-model="radio" label="1">链接地址：</el-radio>
              <el-input placeholder="请输入内容" v-model="linkAddress">
<!--                <el-button class="url-btn" slot="append">提取链接</el-button>-->
              </el-input>
            </div>
            <div class="tips">添加外部网页链接地址；如：https://www.baidu.com</div>
            <div class="tips">注意：请将外部网页地址添加到小程序业务域名中</div>
<!--            <div>-->
<!--              <el-radio v-model="radio" label="2">拨打电话：</el-radio>-->
<!--              <el-input placeholder="请输入内容" v-model="input2"></el-input>-->
<!--            </div>-->
          </div>
        </el-tab-pane>
      </el-tabs>
      <div style="text-align: center; margin-top: 20px">
        <el-button @click="isShown = false">取消</el-button>
        <el-button @click="submit" type="primary">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getDragLink, getCategoryList, getGoodList ,getCustomPageList} from "@/api/plug";
import {mapState} from "vuex";
export default {
  name: "urlSelect",
  data() {
    return {
      input2: "",
      isShown: false,
      cateShown: [false, false, false, false, false],
      activeName: "platform",
      radio: "1",

      licur: "-1",
      //商城首页
      marketKeyWords: "",
      marketLoad: false,
      //商品分类
      productCategory: [],
      total1: 10,
      currentPage1: 1,
      categoryLoad: false,
      //商品
      productList: [],
      total2: 10,
      currentPage2: 1,
      productLoad: false,

      customPageList: [],
      //选中的数据
      selectNum: [],
      //小程序跳转
      appjumpLoad: false,
      appName:'',
      appId:'',
      path:'',
      linkAddress:'',
      marketPage: [
        {
          id: "index",
          name: "门店首页",
          url: "yb_wm/index/index",
        },
        {
          id: "goods",
          name: "点单页",
          url: "yb_wm/index/goods",
        },
        {
          id: "cashier",
          name: "当面付",
          url: "yb_wm/shop/in/dmf",
        },
        {
          id: "fastOrder",
          name: "快餐",
          url: "yb_wm/shop/ffmode/goods",
        },
        {
          id: "queuing",
          name: "排队取号",
          url: "yb_wm/shop/lineup/pdqh",
        },
        {
          id: "reserve",
          name: "餐桌预定",
          url: "yb_wm/shop/reserve/index",
        },
        {
          id: "storage",
          name: "酒水寄存",
          url: "yb_wm/shop/storage/index",
        },
        {
          id: "userStorage",
          name: "我的寄存",
          url: "yb_wm/shop/storage/list",
        },
        {
          id: "takeOutFood",
          name: "外卖地址",
          url: "yb_wm/index/goods",
        },
        {
          id: "TakeFood",
          name: "自取类型",
          url: "yb_wm/index/goods",
        },
        {
          id: "myCoupon",
          name: "我的优惠券",
          url: "yb_wm/my/coupon/my",
        },
        // {
        //   id: "navigation",
        //   name: "门店导航",
        //   url: "yb_wm/shop/ffmode/goods",
        // },
        {
          id: "myOrder",
          name: "我的订单",
          url: "yb_wm/index/order-index",
        },
        {
          id: "member",
          name: "个人中心",
          url: "yb_wm/index/my-index",
        },
        {
          id: "aboutUs",
          name: "关于我们",
          url: "yb_wm/my/other/gywmtwo",
        },
        {
          id: "helpCenter",
          name: "帮助中心",
          url: "yb_wm/my/other/bzzx",
        },
        {
          id: "contactCustomer",
          name: "联系客服",
          url: "yb_wm/my/other/kf",
        },
        {
          id: "myAddress",
          name: "我的地址",
          url: "yb_wm/my/address/index",
        },
        {
          id: "couponCenter",
          name: "领券中心",
          url: "yb_wm/my/coupon/center",
        },
        {
          id: "exchange",
          name: "兑券入口",
          url: "yb_wm/my/coupon/dh",
        },
        {
          id: "live",
          name: "直播列表",
          url: "yb_wm/other/live-list",
        },
        {
          id: "balanceRecharge",
          name: "充值中心",
          url: "yb_wm/other/recharge/index",
        },
        {
          id: "signIndex",
          name: "积分签到",
          url: "yb_wm/my/signin/index",
        },
        {
          id: "integralShop",
          name: "积分商城",
          url: "yb_wm/my/integral/shop-index",
        },
        {
          id: "collectionCourtesy",
          name: "收藏有礼",
          url: "yb_wm/other/scyl",
        },
        {
          id: "information",
          name: "资讯列表",
          url: "yb_wm/other/info/index",
        },
        {
          id: "cardIndex",
          name: "普通会员卡",
          url: "yb_wm/order/vip/wkk",
        },
        {
          id: "collect",
          name: "集点活动",
          url: "yb_wm/order/jd",
        },
        {
          id: "payVip",
          name: "付费会员卡",
          url: "yb_wm/order/payvip/index",
        },
        {
          id: "oldWithNew",
          name: "老带新",
          url: "yb_wm/order/invitation/yqyl",
        },
        // {
        //   id: "distribution",
        //   name: "分销商",
        //   url: "yb_wm/order/invitation/sqfx",
        // },
      ],
    };
  },
  created() {},
  computed: {
    ...mapState(["list", "currentId","susBtn","open"]),
    styles() {
      if (this.currentId == -2) {
        return this.susBtn[0].styles;
      }else if(this.currentId == -5){
        return this.open[0].styles;
      } else {
        return this.list[this.currentId].styles;
      }
    },
  },
  watch: {
    activeName() {
      switch (this.activeName) {
        case "platform":
          // this.getMarketPage();
          break;
        case "productCategory":
          this.getProductCategory();
          break;
        case "product":
          this.getProductList();
          break;
        case "appjump":
          // this.getProductList();
          break;
        case "customPage":
          this.getPageList();
          break;
        case "link":
          break;
      }
    },
  },
  props: ["selectShow"],
  methods: {
    //获取商城首页
    // getMarketPage() {
    //   this.marketLoad = true;
    //   getDragLink().then((res) => {
    //     this.marketLoad = false;
    //     if (res.data.code == 1) {
    //       this.marketPage = res.data.data;
    //     } else {
    //       this.$message.error(res.data.msg);
    //     }
    //   });
    // },
    //获取商品分类
    getProductCategory() {
      this.categoryLoad = true;
      var params = {
        page: this.currentPage1,
      };
      getCategoryList(params).then((res) => {

        this.categoryLoad = false;
        if (res.data.code == 1) {
          this.productCategory = res.data.data;
          this.total1 = res.data.count;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    //分页商品分类
    fy1(currentPage) {
      this.currentPage1 = currentPage;
      this.getProductCategory();
    },
    //获取商品
    getProductList() {
      this.productLoad = true;
      const id = this.styles.productName ? this.styles.productName.map((item) => item.name.id):[];
      var params = {
        page: this.currentPage2,
        stock: 1,
        id,
      };
      getGoodList(params).then((res) => {
        this.productLoad = false;
        // console.log(res.data, 666);
        if (res.data.code == 1) {
          this.productList = res.data.data.data;
          this.total2 = res.data.count;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    //获取自定义页面
    getPageList() {
      // const id = this.styles.productName ? this.styles.productName.map((item) => item.name.id):[];
      // var params = {
      //   id,
      // };
      getCustomPageList().then((res) => {
        if (res.data.code == 1) {
          this.customPageList = res.data.data;
          // this.total2 = res.data.count;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    //分页商品
    fy2(currentPage) {
      this.currentPage2 = currentPage;
      this.getProductList();
    },
    //获取选择的
    gainUrl(v, category) {
      // console.log(123,v, category)
      this.licur = v.name + v.id;
      this.selectNum = {
        params: this.activeName,
        select: v,
      };
    },
    //提交小程序输入的路径
    gainUrl2(){
      this.selectNum = {
        params: this.activeName,
        name: {
          name:this.appName,
          appId:this.appId,
          path:this.path,
        },
        category: '小程序跳转',
      };
    },
    gainUrl3(){
      this.selectNum = {
        params: this.activeName,
        name: {
          name:this.linkAddress
        },
        category: this.linkAddress
      };
    },
    //确定
    submit() {
      if(this.activeName=='appjump'){
        this.gainUrl2()
        this.$emit("getUrl", this.selectNum);
      }else if(this.activeName=='link'){
        this.gainUrl3()
        this.$emit("getUrl", this.selectNum);
      }
      else {
        this.$emit("getUrl", this.selectNum);
      }
      this.isShown = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.title {
  font-size: 14px;
  font-weight: bold;
  line-height: 20px;
  color: #262b30;
  padding-bottom: 20px;
}
//商城页面
.url-list {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
  > .liCur {
    background-color: #155BD4;
    color: #fff;
  }
  > li {
    width: 110px;
    padding: 8px 0;
    border: 1px solid #e9edef;
    border-radius: 4px;
    text-align: center;
    margin-right: 20px;
    margin-bottom: 20px;
    color: #212121;
    cursor: pointer;
  }
}
//商品
.product-intro {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  > span {
    margin: 0 5px 0 10px;
    background-color: #e6fff9;
    color: #00c5c5;
  }
}
//商品分类
.product-type {
  .product-type-title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 10px;
    > li {
      font-size: 14px;
      font-weight: bold;
      color: #212121;
      padding: 10px 0;
    }
    li:nth-of-type(1) {
      width: 60%;
    }
    li:nth-of-type(2) {
      width: 20%;
    }
    li:nth-of-type(3) {
      width: 20%;
    }
  }
  .list {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 10px;
    border-top: 1px solid #eee;
    background-color: #f4f6f8;
    font-weight: bold;
    color: #212121;
    > div:nth-of-type(1) {
      width: 60%;
      > span:nth-of-type(2) {
        display: inline-block;
        width: 120px;
        background-color: #f0f4f6;
        padding: 10px;
        border: 1px solid #e9edef;
        margin-left: 20px;
      }
    }
    > div:nth-of-type(2) {
      width: 20%;
    }
    > div:nth-of-type(3) {
      width: 20%;
    }
  }
}
//自定义链接
.add-url {
  padding: 50px;
  > div {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 40px;
  }
}
.url-btn {
  background-color: #fff;
  //color: @mainColor !important;
}
.content {
  height: 500px;
  //overflow: hidden;
  //overflow-y: scroll;
}
.xcxxz{
  padding: 20px 40px;
}
  .tips{
    line-height: 16px;
    color: #999;
    font-size: 12px;
    margin-top: 10px;
    margin-bottom: 20px;
  }
  .mar_b20{
    margin-bottom: 20px;
  }
</style>
